<template>
  <div>
    <van-nav-bar
      :title="$route.query.key"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
    />
    <div class="goods-show" v-if="goodList.length">
      <div
        v-for="item in goodList"
        :key="item.id"
        class="good-list"
        @click="
          $router.push({
            path: '/category',
            query: item.id,
          })
        "
      >
        <img v-lazy="item.imgs.split(`||`)[0]" class="imgs" />
        <div class="desc">
          <p class="good-name">{{ item.name.substr(0, 10) + "..." }}</p>
          <span class="price">￥{{ item.price }}</span>
          <span class="views">浏览量{{ item.agoprice }}</span>
          <van-icon name="shopping-cart-o" tag="p" @click.stop="insert(item)" />
        </div>
      </div>
      
    </div>
    <div class="empty" v-else >
      <img src="https://bpic.588ku.com/element_water_pic/19/04/10/690d86f5d498908371fdd0a5e16e2bd2.jpg" >
    </div >
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
import { searchData } from "@api";
import {Toast} from 'vant'
export default {
  data() {
    return {
      goodList: [],//保存查找的商品
      
    };
  },
  created() {
   //判断搜索内容是否为空
    if (this.$route.query.key) {

      //向数据库请求查找内容
      searchData(this.$route.query.key).then((res) => {
        if (res.data.code === 200) {
  
          if (res.data.data.length > 0) {
            this.goodList = res.data.data;
            console.log(res.data,111);
          }
        }
      });
    }
  },
  methods: {
    ...mapMutations(['insert']),
    //返回上一页
    onClickLeft() {
      this.$router.go(-1);
    },
    
  },
};
</script>

<style lang="scss" scoped>
.goods-show{
    overflow: hidden;
    padding: 50px 10px 0 10px;
    
}
.good-list {
  width: 100%;
  display: block;
  padding: 10px;
  // background: powderblue;
  border-radius: 5px;
  margin: 10px 5px;
  background: #eee;
  border-radius: 5px;
  display: flex;
  box-sizing: border-box;
}
.imgs {
  width: 40%;
}
.desc {
  flex: 1;
  height: 100%;
  text-align: left;
  padding: 0 20px;
  overflow-x: hidden;
  width: 100%;
}
.good-name {
  margin-bottom: 20px;
  padding-bottom: 60px;
}
.price {
  text-align: right;
  color: red;
  font-size: 14px;

  margin-right: 40px;
  font-weight: 600;
}
.views {
  font-size: 12px;
  text-align: right;
}
.van-icon-shopping-cart-o {
  display: block;
  text-align: right;
  font-size: 30px;
  padding-right: 20px;
  color: orange;
}
.empty{
  padding-top: 50px;
  width: 100%;
  box-sizing: border-box;
  img{
    width: 100%;
  }
}
</style>